<template>
    <div class="container">

        <div class="top-nav">
            <div class="top-title">
                <p>我要买</p>
                <i></i>
            </div>

            <div class="list">
                <div class="title">
                    <div :class="['left', indextab == 0 ? 'con' : '']" @click="indextab = 0">
                        <span></span>
                        <p>手游</p>
                    </div>
                    <div :class="['right', indextab == 1 ? 'con' : '']" @click="indextab = 1">
                        <span></span>
                        <p>端游</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="lists">

            <div class="left" ref="left">
                <p v-for="(item, index) in num" :key="index" @click="getIndex(index, item)"
                    :class="index == indexNum ? 'con' : ''">{{ item }}</p>
            </div>

            <div class="right" v-if="indextab == 0">
                <ul>
                    <router-link to="/Details" tag="li" v-for="(item, index) in newArry" :key="index">

                        <div class="img" @click="getName(item.name)"><img :src="item.game_image_url" alt="">
                        </div>
                        <p>{{ item.name }}专区</p>
                    </router-link>

                </ul>
            </div>


            <div class="right" v-if="indextab == 1">
                <ul>
                    <router-link to="/Details" tag="li" v-for="(item, index) in computesData" :key="index">
                        <div class="img" @click="getName(item.name)"><img :src="item.gameImageUrl" alt=""></div>
                        <p>{{ item.name }}专区</p>
                    </router-link>

                </ul>
            </div>

            <div class="totop" @click="toTop" :style="shop"><img src="../assets/img/totop.png" alt=""></div>
        </div>


        <bottom-com></bottom-com>


    </div>
</template>

<script>
import { getIndexes, getData, getcomputes } from "../assets/api/home.js"
// js引入按需加载
// import BScroll from "@better-scroll/core";
export default {
    data() {
        return {
            indextab: 0,
            num: null,
            //下标
            indexNum: 0,
            // 数据内容
            GameData: null,
            computesData: null,
            shop: 'display: none;',
            newArry: [],

        };
    },
    components: {
        bottomCom: () => import('../components/bottomCom.vue')
    },
    methods: {
        //请求索引栏数据
        getIndexesFun() {
            getIndexes().then((data) => {
                this.num = data.data.py;
                console.log(this.num);
            })
        },
        //请求数据
        getDataFun() {
            getData().then((data) => {
                this.GameData = data.data
                console.log(this.GameData);
                this.newArry=this.GameData
            })
        },
        //请求电脑游戏数据
        getcomputesFun() {
            getcomputes().then((data) => {
                this.computesData = data.data.data
                console.log(this.computesData);
            })
        },
        //获取名字
        getName(name) {
            console.log(name);
            window.localStorage.setItem("name", name)

        },
        //左侧索引点击
        getIndex(num, value) {
            this.indexNum = num
            console.log(value);
            this.newArry = this.GameData.filter((item) => {
                if (item.first_py == value) {
                    return item
                }
                if(value == "1"){
                    return this.GameData
                }
            })
            console.log(this.GameData);

        },
        toTop() {
            document.documentElement.scrollTop = 0;
        },
        handleScroll() {
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            if (scrollTop >= 100) {
                this.shop = 'display:block;'
            } else {
                this.shop = 'display:none;'

            }
        },
        toSreach() {
            console.log("跳转到搜索页面");
            this.$router.push({
                path: '/seach',
                query: {
                    GameData: this.GameData
                }
            })
        }

    },

    created() {
        this.getIndexesFun()
        this.getDataFun()
        this.getcomputesFun()
        
    },
    mounted() {
        window.addEventListener('scroll', this.handleScroll)
        console.log(this.newArry);
        console.log(this.GameData);
        
    }

}
</script>

<style lang="scss">
@import "../assets/css/base.css";

.top-nav {
    position: fixed;
    width: 100%;
    background-color: #fff;

    .top-title {
        height: 42px;
        line-height: 42px;
        background-color: #ff6600;
        position: relative;

        p {
            font-size: 17px;
            color: #fff;
            text-align: center;
        }

        i {
            display: block;
            width: 32px;
            height: 100%;
            background: url(../assets/img/history.png) no-repeat center center;
            background-size: 60%;
            position: absolute;
            right: 14px;
            top: 0;
        }
    }

    .list {
        background-color: #ffffff;

        .title {
            height: 43px;
            display: flex;

            .left {
                width: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                border: 1px solid #ececec;
                font-size: 15px;
                border-right: none;
                background-color: #f8f8f8;

                p {
                    padding-left: 30px;
                    background: url(../assets/img/shouji.png)no-repeat 0 center;
                    background-size: 40%;
                }
            }

            .right {
                width: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                border: 1px solid #ececec;
                font-size: 15px;
                background-color: #f8f8f8;

                p {
                    padding-left: 30px;
                    background: url(../assets/img/diannao-gray.png)no-repeat 0 center;
                    background-size: 40%;
                }
            }

            .con {
                color: #ff6600;
                background-color: #fff;
            }
        }
    }
}



.lists {
    display: flex;
    padding-top: 84px;


    .left {
        width: 14%;
        height: 100%;
        overflow: hidden;
        overflow-y: scroll;
        position: fixed;
        background-color: #f1f1f1;

        &::-webkit-scrollbar {
            display: none
        }

        p {

            width: 52px;
            height: 48px;
            line-height: 48px;
            text-align: center;
        }

        .con {
            background-color: #fff;
        }

    }


    .right {
        width: 86%;
        margin-left: 14%;

        ul {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 60px;
            width: 100%;

            li {
                width: 33.3%;
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-top: 10px;

                .img {
                    width: 69px;
                    border-radius: 8px;
                    height: 69px;

                    img {
                        border-radius: 8px;
                    }
                }

                p {
                    width: 65px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    font-size: 13px;
                    color: #333333;
                    text-align: center;
                }
            }
        }
    }

    .totop {
        width: 44px;
        height: 44px;
        position: fixed;
        bottom: 50px;
        right: 0;
    }
}
</style>